<template>
    <el-container class="electronicSignature">
        <el-main class="mainDetails">
            <SearchPanel title="决算送审查询" show-fold @setHeight="setHeight">
                <div ref="queryFormBox" class="search-flex-box">
                    <MyForm ref="formRef" v-model="queryParams" :form-option="formOption" :select-list="dicLists"
                        @handleEvent="changeHandleEvent" />
                    <div class="searchBtn">
                        <el-button type="primary" class="pms-button-primary" @click="searchForm">查询</el-button>
                        <el-button type="primary" class="pms-button-primary" @click="resetForm">重置</el-button>
                    </div>
                </div>
            </SearchPanel>
        </el-main>
    </el-container>
</template>

<script>
import SearchPanel from '@/components/basic/SearchPanel'
import MyForm from '@/components/basic/myForm'
import { formOption } from '@/views/finalAccounts/setting'
import { mapActions, mapMutations } from 'vuex'
import { getDropdownDataApi, getDropdownDataProvinceApi, queryFinAuditList } from '@/api/finalAccounts/index'
export default {
    name: 'FinalAccountSearch',
    components: {
        SearchPanel,
        MyForm
    },
    data() {
        return {
            queryParams: {},
            dicLists: {
            },
            formOption
        }
    },
    created() {
        this.$nextTick(() => {
            this.setHeight(false)
        })
        this.getDictData()
    },
    methods: {
        ...mapActions('finalAccounts', ['getSearchList']),
        ...mapMutations('finalAccounts', ['setSearchParams', 'setDicLists']),
        setHeight(isFold) {
            const child = this.$refs.formRef.$refs
            const height = (formOption.itemData.length / 3).toFixed() - 0 - 0
            this.$refs.queryFormBox.style.height = isFold ? `${height * 24}px` : '54px'
            child.myFormRef.style.height = isFold ? `${height * 24}px` : '54px'
        },
        clearProvince(prop) {
            if (prop === 'provinceCode') {
                this.$set(this.dicLists, 'CITY_DIC', [])
                this.$set(this.dicLists, 'COUNTY_DIC', [])
                this.queryParams.cityCode = ''
                this.queryParams.countyCode = ''
            }
            if (prop === 'cityCode') {
                this.$set(this.dicLists, 'COUNTY_DIC', [])
                this.queryParams.countyCode = ''
            }

        },
        changeSelectTime(prop, type) {
            const backResult = this.queryParams[prop] === '' ? this.queryParams[prop] : this.queryParams[prop][type]
            return backResult == undefined ? '' : backResult

        },
        searchForm() {
            if (!this.queryParams.provinceCode) {
                this.$message.warning('请先选择所属省分然后再查询')
                return
            }
            const params = {
                ...this.queryParams,
                acceptStartData: this.changeSelectTime('accCompleteTime', 0),
                acceptEndData: this.changeSelectTime('accCompleteTime', 1),
                deliverStartData: this.changeSelectTime('payTime', 0),
                deliverEndData: this.changeSelectTime('payTime', 1),
                returnStartData: this.changeSelectTime('backTime', 0),
                returnEndData: this.changeSelectTime('backTime', 1)
            }
            const pageNum = {
                pageNum: 1,
                pageSize: 11
            }
            delete params.accCompleteTime
            delete params.payTime
            delete params.backTime
            this.setSearchParams(params)
            this.getSearchList(pageNum)
        },
        resetForm() {
            this.$refs.formRef.reset()
            this.setSearchParams({})
            this.$set(this.dicLists, 'CITY_DIC', [])
            this.$set(this.dicLists, 'COUNTY_DIC', [])
        },
        async changeHandleEvent(prop, row) {
            if (['provinceCode', 'cityCode', 'countyCode'].includes(prop)) {
                if (!row) {
                    this.clearProvince(prop)
                    return
                }
                await this.getProvinceData(prop)
            }
        },
        async getProvinceData(prop) {
            const enumObj = {
                provinceCode: 'CITY_DIC',
                cityCode: 'COUNTY_DIC',
            }
            const params = {
                proOrgCode: this.queryParams.cityCode ? '' : this.queryParams.provinceCode,
                cityOrgCode: this.queryParams.cityCode,
            }
            const results = await getDropdownDataProvinceApi(params)
            this.$set(this.dicLists, prop ? enumObj[prop] : 'PROVINCE_DIC', results.data ?? [])
            this.setDicLists(this.dicLists)
        },
        async getDictData() {
            const arr = ['FIN_AUDIT_STATE', 'IS_RAILWAY', 'PL_TYPE', 'IS_PUSH', 'PROJ_TYPE', 'COF_YESORNO']
            const promises = arr.map(item => getDropdownDataApi(item))
            const results = await Promise.all(promises)
            arr.forEach((item, i) => {
                this.$set(this.dicLists, item, results[i].data ?? [])
            })
            await this.getProvinceData()
        },
    }
}

</script>
<style lang="scss" scoped>
.electronicSignature {
    width: 100%;
    padding: 20px;

    .mainDetails {
        padding: 0 25px;

        .search-flex-box {
            height: auto;

            .searchBtn {
                width: 100px;
                margin-left: auto;
                display: flex;
                margin-top: 4px;
                flex-direction: column;

                .el-button+.el-button {
                    margin-left: 0;
                    margin-top: 8px;
                }
            }
        }
    }

}

// 滚动条样式
::v-deep .el-dialog__body::-webkit-scrollbar {
    width: 6px;
    height: 10px;
}

::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #f2f3f5;
}

::v-deep .el-range-editor.el-input__inner {
    padding: 0 4px !important;
}
</style>

<style>
.el-select-dropdown__item {
    width: 100%;
}
</style>
